<template>
  <div class="container setting">
    <h4>权限设置</h4>
    <div class="cells">
      <div class="cell">
        <div class="cell-hd">用户手机</div>
        <div class="cell-bd"><input placeholder="用户手机" class="cell-input cell-phone"></div>
      </div>
      <div class="cell">
        <div class="cell-hd">缴纳方式</div>
        <div class="cell-bd">
          <label class="cell-label">
            <input name="account" type="radio" checked="checked" class="cell-radio">账套管理员
          </label>
          <label class="cell-label">
            <input name="account" type="radio" class="cell-radio">主管
          </label>
          <label class="cell-label">
            <input name="account" type="radio" class="cell-radio">制单人
          </label>
          <label class="cell-label">
            <input name="account" type="radio" class="cell-radio">出纳
          </label>
          <label class="cell-label">
            <input name="account" type="radio" class="cell-radio">查看
          </label>
        </div>
      </div>
      <div class="cell">
        <div class="cell-hd"></div>
        <div class="cell-bd">
          <button class="cancel-btn">取消</button>
          <button class="submit-btn" @click="openalert">保存</button>
        </div>
      </div>

      <p>
        提示：<br>
        您输入该用户的手机后，如果该用户已注册，则系统会赋予该用户相应的权限；<br>
        如果该用户还未注册，则系统会用该手机号创建账号，并赋予该账号相应的权限，并发短信给该手机号告知该账号的登录密码。<br>
      </p>
      <p>
        账套管理员：可以备份恢复、删除账套、重新初始化账套，也可以授予其他人员权限。<br>
        主管：除了备份恢复、删除账套和重新初始化账套，其他的权限都有，包括制单人和出纳的权限。<br>
        制单人：除了备份恢复、删除账套、重新初始化账套和出纳模块的录入功能，其他的权限都有。<br>
        出纳：拥有出纳模块的全部权限，还有凭证、账簿和报表的查看权限，也有部分设置的权限。<br>
        查看：只能查看数据，不能修改任何数据，如录入凭证或修改凭证。<br>
      </p>
    </div>

  </div>
</template>

<script type="text/ecmascript-6">
  import '../../assets/css/base.css'

  export default {
    methods: {
      openalert() {
        alert('当前为演示账号，无法修改权限设置')
      }
    }
  }
</script>

<style>
  .cell-phone {
    width: 200px !important;
  }

  .setting .cell button {
    width: 150px;
    height: 40px;
    line-height: 40px;
    margin-right: 20px;
    border: none;
    cursor: pointer;
  }

  .setting p {
    margin-top: 50px;
    padding-left: 30px;
    color: #999;
    line-height: 40px;
  }
</style>
